<!DOCTYPE html>
<html>

	<head>
		<title>OpenAuth.net官方网站 - 最好用的.net权限工作流框架|.net core快速开发框架|.net core权限管理|.net core工作流</title>
		<meta name="Keywords" content="openauth.net,.net开源工作流,.NET开源权限管理">
		<meta name="Description" content="最好用的.net开源工作流框架,最好用的.NET开源权限管理框架">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" href="../../css/element-ui.css">
		<link href="../../font/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/question/detail.css">
		<style>
			code {
				display: block;
				overflow: auto;
				background: #f4f4f4;
				padding: 5px 10px;
				border: 1px solid #eee;
				word-wrap: break-word;
				width: 844px;
				/* Internet Explorer 5.5+ */
			}
		</style>
	</head>

	<body>
		<div id="app">
			<el-container>
				<el-header class="box-flex align-center">
					<app-header :current="current"></app-header>
				</el-header>
				<el-main class="bg-white">
					<div class="container p-t-m box-flex">
						<div class="left-body flex-1 flex-wrap">
							<div class="article">
								<div class="title">
									{{question.title}}
								</div>
								<div class="box-flex justify-content-space-between align-center">
									<div class="tags">
										<el-tag class="fly-tip-stick" v-if="question.stick>0">置顶帖</el-tag>
										<el-tag class="fly-tip-jing" v-if="question.status==1">精帖</el-tag>

									</div>
									<div class="scan-see">
										<i class="fa fa-fw fa-eye"></i>{{question.hits}}
										<i class="fa fa-fw fa-commenting"></i>{{question.comment}}
									</div>
								</div>
								<div class="user-info box-flex">
									<div class="user-avator" @click="linkUser(question.user.id)">
										<img :src="'../../img/avatar/'+question.user.pic" :alt="question.user.name">
									</div>
									<div class="flex-1">
										<div class="user" @click="linkUser(question.user.id)">
											<span class="name">{{question.user.name}}</span>
											<span class="role" v-if="question.user.rmb">VIP{{question.user.rmb}}</span>
											<span class="time">发布于{{question.time}}</span>
										</div>
										<div class="sa">
											悬赏：{{question.experience}}飞吻
											<span v-if="(user && myself && question.accept == undefined) || user.auth == 1" class="jie-admin" type="edit">
             									 <a :href="'edit.html?id='+question.id">编辑此贴</a>
            								</span>
										</div>
									</div>
								</div>
								<div class="body mce-content-body panel-body" v-html="question.content">
								</div>
							</div>
							<div class="questions" v-if="answers && answers.length>0">
								<div class="hot">
									热门回答
								</div>
								<div class="questions-body">
									<div class="question" v-for="item in answers" :key="item.id">
										<div class="user box-flex align-center" @click="linkUser(item.user.id)">
											<div class="avator">
												<img :src="'../../img/avatar/'+item.user.pic">
											</div>
											<div class="user-right">
												<div class="name">
													{{item.user.name}}
													<em v-if="item.user.rmb" style="padding:0 ; color: #FF7200;">VIP{{ item.user.rmb }}</em>
													<em v-if="item.user.id == question.user.id">(楼主)</em>
													<em style="color:#5FB878" v-else-if="item.user.auth == 1">(管理员)</em>
													<em style="color:#FF9E3F" v-else-if="item.user.auth == 2">（活雷锋）</em>
													<em style="color:#999" v-else-if="item.user.auth == -1">（该号已被封）</em>
												</div>
												<div class="time">
													{{item.time}}
												</div>
											</div>
										</div>
										<i v-if="item.id == question.accept" class="iconfont icon-caina" title="最佳答案"></i>
										<div class="question-content" v-html="item.content">
										</div>
										<div class="requestion">
											<div class="repeat" @click="repeat(item)">
												<i class="fa-commenting fa-fw fa"></i> 回复
											</div>

										</div>
									</div>

									<el-pagination @current-change="answerPageChange" v-show="answerPageCnt>1" background layout="prev, pager, next" :page-count="answerPageCnt">
									</el-pagination>
								</div>

							</div>
							<el-row class="m-t-m">
								<tinymce :height="200" v-model="content"></tinymce>
							</el-row>
							<el-row class="m-t-m">
								<el-button type="primary" @click="saveQuestion">提交回答</el-button>
							</el-row>
						</div>

						<div class="right-body">
							<el-card class="left-body flex-1 card-small" shadow="never">
								<div slot="header" class="clearfix box-flex">
									最近热帖
								</div>
								<div class="p-m news">
									<template v-for="(hot,index) in hots">
										<div class="new ellipsis box-flex align-center" @click="linkDetail(hot)" :key="index+1">
											<div class="num" v-if="index>=9">{{index+1}}.</div>
											<div class="num" v-else>0{{index+1}}.</div>
											<div class="title ellipsis">
												{{ hot.title }}
											</div>
											<div class="scan">
												<i class="fa fa-fw fa-eye">{{ hot.hits }}</i>
											</div>
										</div>
									</template>

								</div>
							</el-card>

							<el-card class="left-body flex-1 card-small" shadow="never">
								<div slot="header" class="clearfix box-flex">
									友情链接
								</div>
								<div class="box-flex flex-wrap p-m">
										<div class="link">
												<a href="https://panjiachen.github.io/vue-element-admin-site/zh/" target="_blank">vue-element-admin</a>
										</div>
										<div class="link">
											<a href="https://dotnetchina.gitee.io/furion/" target="_blank">Furion</a>
										</div>
										<div class="link">
											<a href="https://cn.vuejs.org/" target="_blank">VUE</a>
										</div>
										<div class="link">
											<a href="http://element.eleme.io/#/zh-CN" target="_blank">ELement-UI</a>
										</div>
										<div class="link">
											<a href="https://fly.layui.com/" target="_blank">LayUI</a>
										</div>
								</div>
							</el-card>
						</div>
					</div>
				</el-main>
				<el-footer height="100px">
					<app-footer></app-footer>
				</el-footer>
			</el-container>
		</div>

	</body>
	<!-- import Vue before Element -->
	<script src="../../js/vue.js"></script>

	<!-- import JavaScript -->
	<script src="../../js/element-ui.js"></script>
	<script src="../../js/axios.js"></script>
	<script src="../../js/header.js"></script>
	<script src="../../js/footer.js?v=2"></script>
	<script src="../../tinymce4.7.5/tinymce.min.js"></script>
	<script src="../../js/common.js"></script>
	<script type="text/template" id="tiny">
		<div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
			<textarea :id="tinymceId" class="tinymce-textarea" />
			<div class="editor-custom-btn-container">
				<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
			</div>
		</div>
	</script>
	<script src="../../js/TinyMce/eidtorImage.js"></script>
	<script src="../../js/TinyMce/index.js"></script>
	<script>
		new Vue({
			components: {
				'tinymce': tinyMce
			},
			data() {
				return {
					myself: false, //标识该问题是否是登录的用户的
					current: "qa",
					content: "",
					question: {
						user: {}
					},
					answers:[],
					answerPageCnt:0,
					user: {},
					hots: [],
					id:'',
				}
			},
			created() {
				this.id = GetQueryString('id')
				var isLogin = sessionStorage.isLogin
				if(isLogin === 'true') {
					var user = sessionStorage.user
					user = JSON.parse(user);
					this.user = user
				}
				service({
					url: '/questions/getone?id=' + this.id,
					method: 'get',
				}).then((res) => {
					this.myself = this.user.id == res.data.user.id
					this.question = res.data;
				})
				this.queryAnswersOfQuestion({
						index: 1,
						size: 10,
						jid: this.id
					})
				this.getHot()
			},
			methods: {
				repeat(item) {
					var ele = document.getElementById('app');
					window.scrollTo(0, ele.scrollHeight);
					this.content = '@' + item.user.name
				},
				answerPageChange(e){  //回答翻页
					this.queryAnswersOfQuestion({
						index: e,
						size: 10,
						jid: this.id
					})
				},
				queryAnswersOfQuestion(postData) {  //获取问题的答案
					service({
						url: '/questions/queryAnswersOfQuestion',
						method: 'post',
						data: postData
					}).then((res) => {
						this.answers = res.objects
						this.answerPageCnt = Math.ceil(res.total/ postData.size) //有小数就整数部分加1
					})
				},
				getHot() {
					service({
						url: '/questions/gethot',
						method: 'get',
					}).then((res) => {

						if(res.data.total >= 10) {
							for(var i = 0; i < 10; i++) {
								this.hots.push(res.data.objects[i])
							}
						} else {
							this.hots = res.data.objects
						}
					})
				},
				saveQuestion() {
					var isLogin = sessionStorage.isLogin
					if(isLogin !== 'true') {
						window.location.href = "../user/login.html"
					}
					var data = {
						content: this.content,
						jid: this.question.id
					}
					service({
						url: '/questions/addAnswer',
						method: 'post',
						data: data
					}).then((res) => {
						this.content = ''
						this.$notify.success({
							message: '提交成功'
						})
						service({
							url: '/questions/getone?id=' + this.question.id,
							method: 'get',
						}).then((res) => {
							this.question = res.data;
						})
					})
				},
				linkDetail(e) {
					window.location.href = "detail.html?id=" + e.id
				},
				linkUser(id) {
					window.location.href = "../user/index.html?id=" + id
				}
			}
		}).$mount('#app')
	</script>

</html>